import React from "react"
import { flushSync } from "react-dom"

class Demo extends React.Component {
    state = {
        x: 3,
        y: 19,
        z: 3,
    }
    handle = () => {
        const { x, y, z } = this.state
        // 同时修改三个状态值
        // this.setState(
        //     {
        //         x: x + 1,
        //     }
        //     // () => {
        //     //     console.log("更新完毕X")
        //     // }
        // )
        // this.setState({ y: y + 1 })
        // this.setState({ z: z + 1 }) // 只会统一批处理一次，他是异步执行的

        this.setState({ y: y + 1 })
        flushSync(() => {
            // 会立即刷新更新队列
            this.setState({ x: x + 1 })
        })

        // setTimeout(() => {
        //     this.setState({ y: y + 1 })
        // }, 1000)
        this.setState({ z: z + 1 }) // 会执行两次，一开始会统一更新对列中的数据，等一秒后再更新当前的更新队列中的数据
    }

    // shouldComponentUpdate() {
    //     return false
    // }

    // componentDidUpdate() {
    //     console.log("组件更新后")
    // }

    render() {
        console.log("视图渲染")
        const { x, y, z } = this.state
        return (
            <div>
                x:{x} - y:{y} - z:{z}
                <br />
                <button onClick={this.handle}>按钮</button>
            </div>
        )
    }
}

export default Demo

/**
this.setState([partialState],[callback])
    [partialState]:支持部分状态更改
        this.setState（{
            x:100 //不论总共有多少状态，我只修改一部分，其余的不动
        }）

    [callback]:在状态更改，视图更新完毕后触发执行【可以说只要执行了setState，callback一定会执行】
        + 发生在componentDidUpdate 周期之后，DidUpdate 会在任何状态更改后都触发执行，而回调函数方式，可以在指定状态更新后处理一些事情
        + 特殊：即便我们基于shouldComponentUpdate阻止了状态/视图更新，DidUpdate周期函数肯定不会执行了，但是我们设置的这个callback
        回调函数依然会被触发执行
        + 类似于Vue框架中的$nextTick!!
 */
